<template>
     <el-dialog :title="title" :data="visible" :visible.sync="visible" :show-close="false" width="550px" :modal="true"
                :close-on-click-modal="false"  :close-on-press-escape="false"  top="50px" style="margin-bottom:20px">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        <el-form :model="propsData"  :rules="rules" ref="propsData" label-width="100px">
          <el-form-item label="设备组名称" prop="name">
            <el-input v-model="propsData.name" type="text" placeholder="请输入设备名称" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="api_key" prop="api_key">
            <el-input v-model="propsData.api_key" type="text" placeholder="请输入接入API-KEY"  style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="access_key">
            <el-input v-model="propsData.access_key" type="text" placeholder="请输入access_key"  style="width: 90%;"></el-input>
          </el-form-item>
        
          <el-form-item label="注册码">
            <el-input v-model="propsData.register_code" type="text" placeholder="请输入注册码"  style="width: 90%;"></el-input>
          </el-form-item>
        
          <el-form-item label="用户ID">
            <el-input v-model="propsData.uuid" type="text" placeholder="请输入平台用户ID"  style="width: 90%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
        </div>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API
export default {

  name: 'editDeviceGroup',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object
  },

  data() {
    return {
      loading: false,
      title: '设备编辑',
      rules: {
        name: [
          { required: true, message: '设备名称必填', trigger: 'blur' },
          { pattern: /^[0-9\w\u4E00-\u9FA5\uF900-\uFA2D]*$/, message: '格式错误' }
        ],
        api_key: [
          { required: true, message: 'KEY必填', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    // 编辑标题头信息
    setTitle(v) {
      this.title = v
    },

    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        api_key: this.propsData.api_key,
        name: this.propsData.name,
        access_key: this.propsData.access_key,
        register_code: this.propsData.register_code,
        uuid: this.propsData.uuid,
        id: this.propsData.id
      }
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.loading = true
          if (typeof (postData.id) === 'undefined') {
            this.postAddUrl(postData)
          } else {
            this.postEditdUrl(postData)
          }
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // add-提交数据
    postAddUrl(data) {
      api.addDeviceGroupApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    },

    // edit-提交数据
    postEditdUrl(data) {
      api.editDeviceGroupApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    }
  }
}
</script>